import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Select } from 'antd'
import { getChannels } from '@/store/actions'
const { Option } = Select

export const Channels = ({ value, onChange,width }) => {

  const { channels } = useSelector((state) => state.article)
  const dispatch = useDispatch()

  // 自动请求频道数据
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])

  return (
    <Select placeholder="请选择文章频道" value={value} onChange={onChange} style={{ width }}>
      {channels.map((item) => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  )
}
